<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="styles.css"> <!-- 引入样式 -->
</head>
<body>
    <div class="header">
        <h2>用户管理</h2>
        <div class="button-group">
            <button id="add-user-btn">添加用户</button>
            <button id="logout-btn">登出</button>
        </div>
    </div>

    <table id="user-table">
        <thead>
            <tr>
                <th>用户名</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 用户列表将通过脚本动态添加 -->
        </tbody>
    </table>

    <script>
        // 加载用户列表
        console.log('请求获取用户列表...');
        fetch('http://localhost:3002/users', {
            method: 'GET',
            credentials: 'same-origin'  // 发送请求时，自动携带当前会话的 Cookie
        })
        .then(response => {
            if (response.status === 401) {
                alert('未登录或会话已过期，请先登录');
                window.location.href = 'login.html';  // 未登录，跳转到登录页面
            } else if (response.status === 403) {
                alert('权限不足');
            } else if (response.ok) {
                return response.json();  // 解析 JSON 数据
            } else {
                throw new Error('未知错误');
            }
        })
        .then(data => {
            if (Array.isArray(data)) {
                const userTableBody = document.querySelector('#user-table tbody');
                data.forEach(user => {
                    const row = document.createElement('tr');
                    row.innerHTML = `<td>${user.username}</td>
                                     <td>
                                         <button onclick="editUser(${user.id})">编辑</button>
                                         <button onclick="deleteUser(${user.id})">删除</button>
                                     </td>`;
                    userTableBody.appendChild(row);
                });
            } else {
                alert(data.message);
            }
        })
        .catch(err => {
            console.error('获取用户列表失败:', err);
        });

        // 添加用户按钮
        document.getElementById('add-user-btn').addEventListener('click', () => {
            window.location.href = 'addUser.html';  // 跳转到添加用户页面
        });

        // 编辑用户函数
        function editUser(userId) {
            window.location.href = `editUser.html?id=${userId}`;  // 跳转到编辑用户页面
        }

        // 删除用户函数
        function deleteUser(userId) {
            fetch(`http://localhost:3002/users/${userId}`, {
                method: 'DELETE',
                credentials: 'same-origin'  // 确保会话信息（Cookie）被发送
            })
            .then(response => response.json())
            .then(data => {
                if (data.message === '用户删除成功') {
                    alert('用户删除成功');
                    location.reload();  // 刷新页面
                } else {
                    alert(data.message);
                }
            })
            .catch(err => {
                console.error('删除用户失败:', err);
            });
        }

        // 登出按钮事件
        document.getElementById('logout-btn').addEventListener('click', () => {
            fetch('http://localhost:3002/logout', {
                method: 'POST',
                credentials: 'same-origin'  // 确保会话 Cookie 被发送
            })
            .then(response => response.json())
            .then(data => {
                if (data.message === '登出成功') {
                    alert('您已成功登出');
                    window.location.href = 'login.html';  // 跳转到登录页面
                } else {
                    alert(data.message);
                }
            })
            .catch(err => {
                console.error('登出失败:', err);
            });
        });
    </script>
    <footer>
        <p>项目由 张成飞制作 | 版权所有</p>
    </footer>
</body>
</html>



